<template>
	<!-- 推广海报 -->
	<view>
		<view class="warp_box">
			<image :src="imgUrl" mode="aspectFill"></image>
			<view class="reload" @click="refresh">刷新</view>
			<view class="btn_box">
				<!-- #ifdef MP -->
				<button v-if="album" type='primary' open-type="openSetting" >去授权</button>
				<view class="saveImg" @tap="saveImg" :style="'background:' + colors">保存海报</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="saveImg" @tap="saveImg" :style="'background:' + colors">保存海报</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<view v-if="plusapp" class="saveImg" @tap="saveImgPlus" :style="'background:' + colors">保存海报</view>
				<view v-if="!plusapp" style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
					<u-icon name="fingerprint" color="#ffffff" :size="80"></u-icon>
					<p class="tips">长按图片进行保存</p>
				</view>
				<!-- #endif -->
			</view>
			<view class="btn_code">
				<!-- #ifdef APP-PLUS -->
				<view class="codeImg" @tap="changeCode" :style="'background:' + colors">{{btnMsg}}</view>
				<!-- #endif -->
			</view>
			
			
		</view>
		<u-modal v-model="show" :show-title="false" content="升级VIP会员才可以邀请好友"
			confirm-text="返回" confirm-color="#20cbd4" @confirm="goback">
		</u-modal>
		<!-- <hoverMenu></hoverMenu> -->
	</view>
</template>

<script>
	var app = getApp();
	import hoverMenu from "@/components/public/sa-hover-menu.vue";
	import {spreadBanner} from "@/common/api.js";
	export default {
		components: {
			hoverMenu
		},
		data() {
			return {
				album:false,
				plusapp: false,
				colors: '#20cbd4',
				windowHeight: '',
				windowWidth: '',
				imgUrl: '',
				show:false,
				btnType:0,
				btnMsg:"转为小程序码"
			};
		},

		components: {
			
		},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			//this.getSystem()
			//if(options.level>1){
				// #ifdef MP-WEIXIN
					spreadBanner(this,{type:'mini_wx'})
				// #endif
				// #ifndef MP-WEIXIN
					spreadBanner(this,{})
				// #endif
				
			//}else{
			//	this.show=true
			//}
			if(navigator.userAgent.indexOf("Html5Plus") > -1) {
				this.plusapp = true
			}
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			refresh(){
				// #ifdef MP-WEIXIN
					spreadBanner(this,{type:'mini_wx',reload:1})
				// #endif
				// #ifndef MP-WEIXIN
					spreadBanner(this,{reload:1})
				// #endif
			},
			saveImgPlus(){
				let picurl = this.imgUrl
				plus.nativeUI.toast("正在保存");
				let dtask = plus.downloader.createDownload(picurl, {}, function (d, status) {
					if (status == 200) {
						//d.filename
						plus.gallery.save(d.filename, function () {
							plus.nativeUI.toast("保存成功");
						}, function (e) {
							plus.nativeUI.toast("保存失败，请重试！");
						});
					} else {
						plus.nativeUI.toast("保存失败，请重试！");
					}
				}); 
				dtask.start();
			},
			changeCode(){
				this.imgUrl=""
				if(this.btnType == 0){
					spreadBanner(this,{type:'mini_wx'})
					this.btnType = 1
					this.btnMsg = "转为二维码"
				}else{
					spreadBanner(this,{})
					this.btnType = 0
					this.btnMsg = "转为小程序码"
				}
			},
			floatTouchClick(index){
				this.$uniApi.floatTouch(index);
			},
			goback(){
				uni.navigateBack({
					delta:1
				})
			},
			getSystem() {
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.windowHeight = res.windowHeight
						that.windowWidth = res.windowWidth
						that.createPoster()
					}
				});
			},
			createPoster() { //生成海报
				var ctx = uni.createCanvasContext('mycanvas', this)
				ctx.fillStyle = '#FFFFFF'
				ctx.fillRect(0, 0, this.windowWidth - 30, 560)
				//绘制背景图片
				ctx.drawImage(getApp().globalData.imageUrl+'poster.png', 0, 0, this.windowWidth - 30, 560)
				ctx.save()
				// 绘制圆角二维码
				let avatar_width = 105; //头像宽度
				let avatar_height = 100; //头像高度
				let avatar_x = 110; //头像的x坐标
				let avatar_y = 293; //头像的y坐标
				let radius = 0 //头像的圆角弧度
				this.setRadius(ctx, avatar_width, avatar_height, avatar_x, avatar_y, radius)
				// #ifndef H5
				setTimeout(() => { //必须延时执行 不然h5不显示
					ctx.save();
					ctx.draw()
				}, 200)
				// #endif
				// #ifdef H5
				setTimeout(() => { //必须延时执行 不然h5不显示
					ctx.save();
					ctx.draw(true, () => {
						uni.canvasToTempFilePath({
							canvasId: 'mycanvas',
							success: (res) => {
								this.imgUrl = res.tempFilePath
							}
						})
					})
				}, 500)
				// #endif
			},
			setRadius(ctx, avatar_width, avatar_height, avatar_x, avatar_y, radius) {
				/**
				 * 绘制圆角
				 */
				ctx.arc(avatar_x + radius, avatar_y + radius, radius, Math.PI, Math.PI * 3 / 2);
				ctx.lineTo(avatar_width - radius + avatar_x, avatar_y);
				ctx.arc(avatar_width - radius + avatar_x, radius + avatar_y, radius, Math.PI * 3 / 2, Math.PI * 2);
				ctx.lineTo(avatar_width + avatar_x, avatar_height + avatar_y - radius);
				ctx.arc(avatar_width - radius + avatar_x, avatar_height - radius + avatar_y, radius, 0, Math.PI * 1 / 2);
				ctx.lineTo(radius + avatar_x, avatar_height + avatar_y);
				ctx.arc(radius + avatar_x, avatar_height - radius + avatar_y, radius, Math.PI * 1 / 2, Math.PI);
				// 开始填充
				ctx.strokeStyle = "#fff";
				ctx.fill() //保证图片无bug填充
				ctx.clip(); //画了圆 再剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内

				ctx.drawImage('/static/temp/ewm.png', avatar_x, avatar_y, avatar_width, avatar_height);
				ctx.closePath()
				ctx.restore();
			},
			saveImg() {
				var _this=this;
				//保存图片
				uni.showLoading({
					title: '保存中...'
				});
				let that = this;
				// #ifdef MP
				uni.getSetting({
					success(res) {
						console.log(_this.imgUrl)
						uni.getImageInfo({
							src:_this.imgUrl,
							success(res) {
								var path=res.path;
								uni.saveImageToPhotosAlbum({
									filePath: path,
									success(re) {
										uni.hideLoading();
										uni.showToast({
											title: '保存成功',
											icon: 'success'
										});
									},
									fail(err) {
										_this.album=true
										console.log(JSON.stringify(err))
										uni.showToast({
											title: '未授权',
											icon: 'none'
										});
									}
												
								});
							},
						})
					}
				});
				// #endif
				// #ifdef APP-PLUS
					uni.saveImageToPhotosAlbum({
						filePath: this.imgUrl,
						success(re) {
							uni.hideLoading();
							uni.showToast({
								title: '保存成功',
								icon: 'success'
							});
						},
						fail(err) {
							uni.showToast({
								title: '保存失败',
								icon: 'none'
							});
						}
									
					});
				// #endif
			}
		}
	};
</script>
<style lang="scss" scoped>
	.warp_box{
		width: 100%;
		height: 100vh;
		position: absolute;
		z-index: 1;
	}
	.warp_box image{
		width: 100%;
		height: 100%;
	}
	.btn_box{
		width: 100%;
		margin: 0 auto;
		position: fixed;
		bottom: 110rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.btn_code{
		width: 100%;
		margin: 0 auto;
		position: fixed;
		bottom: 20rpx;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.saveImg{
		width: 400upx;
		height: 80upx;
		border-radius: 40upx;
		background-color: pink;
		line-height: 80upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.reload{
		width: 70rpx;
		height: 70rpx;
		border-radius: 35rpx;
		top: 20rpx;
		right: 20rpx;
		position: absolute;
		background-color: #20cbd4;
		color: #ffffff;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
	}
	.codeImg{
		width: 400upx;
		height: 80upx;
		border-radius: 40upx;
		background-color: pink;
		line-height: 80upx;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.tips{
		text-align: center;
		color: #ffffff;
	}
</style>
